{if !isset($error)}
<style type="text/css">
    .rect {
        z-index:40; 
        position:absolute; 
        background-color: red;
        opacity: 0.5;
        filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    .preview{
        border-style: dotted;
        border-width: 3px;
        border-color: black;
        border-radius: 10px;
        padding: 10px;

    }
</style>
<script language="JavaScript" src="/js/productDetails.js">
</script>
<div id="product" class="col-xs-12 mb20" style="z-index: 1;">
    <p><a href="/$shop->URL/Office/productData?id={echo $product->ProductID}">Pobierz dane produktu</a></p>
    <div class="col-md-5 col-sm-6 col-xs-7 mr10 mt20" style="min-width: 320px; z-index: 2">
        <div id="pointer_div" class="mb15" style = "cursor: crosshair; z-index: 1;max-width: 300px; z-index: 3; position: relative">     
            <div class="rect hidden"></div>
            {if isset($MainPicture)}
            <img src="/img/{echo substr($shop->URL,0,strlen($shop->URL)-1)}/300px/{echo $MainPicture->PictureID->Name}" name="{echo $MainPicture->PictureID->Name}" id="cross" style="z-index: 5" max-width="300">    
            {/if}
            {else}
            brak głównego obrazka
            {/else}
        </div>
        {foreach $picture in $pictures}
        <div style="width: 68px; cursor:pointer" class="text-center mr5 mb10 pull-left" >
            <img src="/img/{echo substr($shop->URL,0,strlen($shop->URL)-1)}/128px/{echo $picture->PictureID->Name}" name="{echo $picture->PictureID->Name}" class="thumb" style="z-index: 1" width="60">
        </div>
        {/foreach}

    </div>
    <div class="col-md-5 col-sm-6 col-xs-7" >
        {if isset($MainPicture)}
        <div class="preview hidden" style="overflow: hidden; position: absolute; top:10px; left: -15px">
            <img src="/img/{echo substr($shop->URL,0,strlen($shop->URL)-1)}/800px/{echo $MainPicture->PictureID->Name}" id="cross" style="z-index: 10; position: absolute; " >
        </div>
        {/if}
        <div class="list-group mt25">
            <div class="list-group-item">Producent <a href="/{echo $shop->URL}/sm/{echo $product->ManufacturerID->URL}">{echo $product->ManufacturerID->Name}</a></div>
            <div class="list-group-item">Kategoria <a href="/{echo $shop->URL}/sc/{echo $product->CategoryID->URL}">{echo $product->CategoryID->Name}</a></div>
            <div class="list-group-item"><div class="price">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>Cena z VAT</th>
                                <th>Cena netto</th>
                            </tr>
                        </thead>
                        <tr>
                            <td>{echo $product->GrossPrice} zł</td>
                            <td>{echo $product->NetPrice} zł</td>
                        </tr>
                    </table>
                </div></div>
            <div class="list-group-item"> <div class="available">
                    {if $product->Amount==0}
                    <p class="alert-danger alert">brak na stanie</p>
                    {/if}
                    {else}
                    Ilość w magazynie: <strong>{echo $product->Amount } szt.</strong>
                    {/else}
                </div></div>
            <div class="list-group-item"><div class="toBasket alert">        
                    <input type="hidden" value="{echo $product->ProductID}">
                    <img height="35px" src="/img/koszyk.gif">
                    Dodaj do koszyka
                </div></div>
        </div>       
    </div>   
</div>
<p class="mt15 bold underline">Specyfikacja:</p>
<table class="table table-bordered table-striped table-responsive">
    <thead>
        <tr><th>Cecha</th><th>Wartość</th></tr>
    </thead>
    <tbody>
        {foreach $feature in $features}
        <tr>
            <td>
                {echo $feature["Value"]["CategoryFeatureID"]["Name"]}
            </td>
            <td>
                {echo $feature["Value"]["Value"]}
            </td>
        </tr>
        {/foreach}
    </tbody>    
</table>
<p class="mt15 bold underline">Opis produktu:</p>
<p>
    {echo $product->ShortDescription}
    <br/>
    {echo $product->Description}
</p>
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#related" aria-controls="related" role="tab" data-toggle="tab">Z tym produktem polecamy:</a></li>
    <li role="presentation"><a href="#relatedBuy" aria-controls="relatedBuy" role="tab" data-toggle="tab">Inni z tym produkem kupują:</a></li>
    <li role="presentation"><a href="#opinions" aria-controls="opinions" role="tab" data-toggle="tab">Opinie o produkcie</a></li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="related" style="padding-top:15px;">
        <div class="list-group">
            {if $related}
            {foreach $prod in $related}
            <a href="/{echo $shop->URL}/sp/{echo $prod->URL}" class="list-group-item "> {echo $prod->Name } w cenie {echo $prod->GrossPrice } zł <span class="badge alert-info">{echo $prod->Amount} szt.</span></a>
            {/foreach}
            {/if}
            {else}
            <p class="alert alert-info">Brak powiązanych produktów z danym produktem</p>
            {/else}
        </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="relatedBuy">
        {if is_array($relatedProdutcsByOrder) && sizeof($relatedProdutcsByOrder)>0}
            {foreach $prod in $relatedProdutcsByOrder}
            <a href="/{echo $shop->URL}/sp/{echo $prod->ProductID->URL}" class="list-group-item "> {echo $prod->ProductID->Name } w cenie {echo $prod->ProductID->GrossPrice } zł <span class="badge alert-info">{echo $prod->ProductID->Amount} szt.</span></a>
            {/foreach}
            {/if}
            {else}
            <p class="alert alert-info">Z tym produktem nie były kupowane inne produkty</p>
            {/else}</div>
    <div role="tabpanel" class="tab-pane fade" id="opinions" style="padding-top:15px;">
        {if isset($opinions)}
        <div class="col-xs-6">
            {foreach $number in $opinionCount}
            <div class="pull-left">
                {echo $number_i}
            </div>         
            <div class="pull-left ml15" style="width:200px; height: 15px; background-color: #b9def0">
               <div class style="height: 15px; width: {echo $number/$allOpinions*100}%; background-color: green"></div>
            </div>
            <div class="pull-left ml20">
                ({echo $number})
            </div> 
            <br/>
            {/foreach}
        </div>
        <div class="col-xs-6">
            <p>Ilość ocen: <strong>$allOpinions</strong></p>
            <p>Średnia ocena: <strong>$avg</strong></p>
            <p>$stars</p>
        </div>
        <div class="col-xs-12">
            <p>Opinie opisowe</p>
            <hr>
            {foreach $opinion in $opinions}
            <p>Opinia wystawiona przez użytkownika 
                {echo $opinion["CustomerID"]["PersonID"]["Name"]} 
                {echo $opinion["CustomerID"]["PersonID"]["Surname"]} 
                </p>
            <p>{echo new \view\StarSet($opinion["Mark"],5,15)} ocena: <strong>{echo $opinion["Mark"]}</strong>, {echo $opinion["AdditionDate"]}</p>
            {if $opinion["Moderated"]==0}
            <p>Treść opinii czeka na zatwierdzenie przez sprzedawcę</p>
            {/if}
            {elseif $opinion["Visable"]==0}
            <p>Treść opinii została ukryta przez sprzedawcę</p>
            {/elseif}
            {else}
            <p>{echo $opinion["Content"]}</p>
            {/else}
            <br/><hr/>
            {/foreach}
        </div>
        {/if}
        {else}
        Nie istnieją jeszcze opinie dla tego produktu
        {/else}
        {if $customer!=null}
        <div class="col-xs-12">
        <p>Oceń produkt</p>
        <p>Po dodaniu Twój komentarz będzie oczekiwał na zatwierdzenie przez sprzedawcę, po zatwierdzeniu pojawi się na liście powyżej, ocena zostanie dodana automatycznie</p>
        <form role="form" class="form-horizontal" id="formAddMark" method="post" >
            <div class="form-group" id="mark">
                <p class="bold col-lg-2">Oceń produkt</p>
                <div id="editProduct" class="col-lg-7"> 
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            wybierz<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu " role="menu" >
                            <li><input type="hidden" value="1" name="vat" ><a>1</a></li>
                            <li><input type="hidden" value="2" name="vat"><a>2</a></li>
                            <li><input type="hidden" value="3" name="vat"><a>3</a></li>
                            <li><input type="hidden" value="4" name="vat"><a>4</a></li>
                            <li><input type="hidden" value="5" name="vat"><a>5</a></li>
                        </ul>
                    </div>
                    <p class="alert-danger" style="padding-left: 10px">
                        {if isset($errors)}
                        {echo \view\View::showErrors($errors, "VAT")}
                        {/if}
                    </p>
                </div>                    
            </div>
            <div class="form-group">
                <p class="bold col-lg-2" >Wprowadź ocenę opisową</p>
                <div id="description" class="col-lg-7">            
                </div>
                <p class="alert-danger" style="padding-left: 10px">
                    {if isset($errors)}
                    {echo \view\View::showErrors($errors, "ShortDescription")}
                    {/if}
                </p>
            </div>
            <button type="submit" class="btn btn-info">Dodaj Ocenę</button>
        </form>
        </div>
        {/if}
        {else}
        <p>zaloguj się jako klient aby oceniać produtky</p>
        {/else}
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#description").Editor("description", "");
    });
</script>
{/if}
{else}
<h1 class="alert alert-danger">{echo $error}</h1>
{/else}